<template>
	<view class="card">
		<view class="cardItem">
			<image :src="bigImg.src" mode="" style="width: 752upx;height: 300upx"></image>
			<view class="manyPicList" >
				<view class="mangyPicItem" v-for="(item,index) in currentImgList":key="index">
						<image class="manyImg"   :src="item.src" mode="" ></image>
				</view>
			</view><!-- 
			<view class="manyPic">
				<image src="../../../../static/images/mylove.jpg" mode="" style="width: 480upx;height: 320upx"></image>
				<image src="../../../../static/images/mylove.jpg" mode="" style="width: 480upx;height: 320upx"></image>
			</view> -->
		</view>
	</view>
</template>

<script>
		import {mapState} from 'vuex'
	export default{
		name:'Card',
		props:['img','index'],
		mounted() {
	     // console.log(this.currentImgList)
		},
		computed:{
			...mapState('home',['homeList']),
			// 大图的数据
			bigImg(){
				return this.img.content[0] || {}
			},
			smallPicList(){
				return this.homeList.filter(item => item.type === 'twoColumn') 
			},
			picList(){
			 return  this.smallPicList.reduce((prev,item)=>{
					  if(item.content.length){
							 prev.push(...item.content)
						}
						return prev
				 },[])
			},
			// 根据自己设计的数据计算出对应小图的显示数据
			currentImgList(){
				return this.picList.filter(item =>{
					if(item.parentId === this.index){
						return true
					}
				})
			}
			
		}
	}
</script>

<style lang="stylus">
	.card
		.cardItem
			.manyPicList
				display: flex
				flex-wrap: wrap
				margin: -10upx 0
				.mangyPicItem
					display: flex
					.manyImg
						width: 375upx
						height: 250upx
					
				
</style>